<template>
<ul class="flexList">
  <li>
     <a class="img" href="javascript:;"><img src="../assets/lis.jpg" ><i>00:38:42</i></a>
     <div class="info">
      <h2>误吸仙气的马乐被告知世界正在崩溃气正在边缘告知世界正在崩溃告知世界正在崩溃</h2>
      <div class="more"><p><i></i>551次</p><p><i></i>2天前</p></div>
      <div class="btn"><a href="javascript:;">删除</a><a href="javascript:;" class="edit">修改</a></div>
     </div>
   </li>
    <li>
     <a class="img" href="javascript:;"><img src="../assets/lis.jpg" ><i>00:38:42</i></a>
     <div class="info">
      <h2>误吸仙气的马乐被告知世界正在崩溃气正在边缘告知世界正在崩溃告知世界正在崩溃</h2>
      <div class="more"><p><i></i>551次</p><p><i></i>2天前</p></div>
      <div class="btn"><a href="javascript:;">删除</a><a href="javascript:;" class="edit">修改</a></div>
     </div>
   </li>
</ul>
</template>

<script>

export default {

}
</script>

<style lang='less'>
  .flexList {
    li {
      display: flex; justify-content: space-between; align-items: center; margin-bottom:10px; height: 118px; overflow: hidden;
      .img {
         position: relative; margin-right: 10px;
         img { display: block; width:175px; height: 118px; border-radius: 5px;}
         i { position: absolute; bottom:3px; right:3px; font-size: 12px; color: #fff; background: rgba(0,0,0,0.7); padding: 2px 5px; border-radius: 5px;}
      }
      .info {
        color:#5A5A5A;
        h2 { font-weight: normal; height: 3.2em; line-height: 1.6em; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
        .more {
           display: flex;padding: 6px 0;
           p {
            font-size: 12px; margin-right: 10px;
            i {display: inline-block; width: 16px; height: 16px; margin-right: 3px; position:relative; top:3px;}
            i:nth-child(1) {  background: url(../assets/num.png) no-repeat;background-size:100% 100%; }
            i:nth-child(2) {  background: url(../assets/num.png) no-repeat;background-size:100% 100%; }
           }
        }
      }
      .btn {
        display: flex; justify-content:flex-end; margin-top:16px;
        a { width: 52px; line-height: 22px; text-align: center; background: #FFBE04; border-radius: 5px; color: #fff; display: block; margin-left:10px; }
        .edit { background: #F2F2F2; color: #5A5A5A;}

      }
    }
  }
</style>
